<template>
  <div class="app-container">

    <wise-crud ref="wise-crud" :urls="urls" :fields="fields" :handle="handle" :filters="filters">
      <template v-slot:handle="slotProps" label-width="500px">
        <el-button v-permission="['superSysOpsAdmin', 'entAdmin']" type="primary" size="small" round
          @click.native.prevent="editHandle(slotProps.row)">编辑
        </el-button>
        <el-button type="info" size="small" round @click.native.prevent="viewHandle(slotProps.row)">查看
        </el-button>
        <el-button v-permission="['superSysOpsAdmin', 'entAdmin']" type="danger" size="small" round
          @click.native.prevent="removeHandle(slotProps.row)">删除
        </el-button>
        <el-button v-permission="['superSysOpsAdmin', 'entAdmin']" type="warning" size="small" round
          @click.native.prevent="setTheme(slotProps.row)">设置主题
        </el-button>
       
          <el-button   type="info" size="small" round @click.native.prevent="screenMonitor(slotProps.row)">项目管理
          </el-button>

      </template>
      <template slot="outHandle">
        <el-col :span="24" style="min-height: 60px">
          <el-button @click.native="viewScreen" style="position: absolute; right: 10px">
            进入大屏
          </el-button>
        </el-col>
      </template>
      <!-- <template v-slot:outHandle>
        <el-button style="position: absolute; right: 10px"> 进入大屏</el-button>
      </template> -->
    </wise-crud>

    <el-dialog ref="drawer" :title="title" :visible.sync="drawer" destroy-on-close>
      <div v-if="drawer" class="draw-body">
        <div class="wise-form">
          <el-form ref="ruleForm" :model="object" :rules="rules" :validate-on-rule-change="false" label-width="130px"
            label-suffix=":">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="object.name" placeholder="请输入项目名称" :maxlength="100" show-word-limit clearable
                autofocus />
            </el-form-item>
            <el-form-item label="项目编号" prop="welderNumber">
              <el-input v-model="object.welderNumber" placeholder="请输入项目编号" :maxlength="100" show-word-limit clearable
                autofocus />
            </el-form-item>
            <el-form-item label="项目地址" prop="area">
              <wise-region v-model="object.area" :obj-keys="[
                  {
                    field: 'province',
                    key: 'province',
                    value: 'key'
                  },
                  {
                    field: 'provinceName',
                    key: 'province',
                    value: 'value',
                    tableShow: true
                  },
                  {
                    field: 'city',
                    key: 'city',
                    value: 'key'
                  },
                  {
                    field: 'cityName',
                    key: 'city',
                    value: 'value',
                    tableShow: true
                  },
                  {
                    field: 'county',
                    key: 'area',
                    value: 'key'
                  },
                  {
                    field: 'countryName',
                    key: 'area',
                    value: 'value',
                    tableShow: true
                  },
                  {
                    field: 'street',
                    key: 'town',
                    value: 'key'
                  },
                  {
                    field: 'streetName',
                    key: 'town',
                    value: 'value',
                    tableShow: true
                  }
                ]" @on-value="setValue" />
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="object.address" placeholder="请输入详细地址" :maxlength="100" show-word-limit clearable
                autofocus />
            </el-form-item>
            <el-form-item label="项目开始时间" prop="startTime">
              <wise-date v-model="object.startTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" />
            </el-form-item>
            <el-form-item label="项目结束时间" prop="endTime">
              <wise-date v-model="object.endTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" />
            </el-form-item>

            <el-form-item label="动火方案" prop="endTime">
              <el-select v-model="object.endTime" placeholder="请选择动火方案">
                <el-option label="区域一" value="shanghai" />
              </el-select>
            </el-form-item>
            <el-form-item label="审批人" prop="endTime">
              <el-select v-model="object.endTime" placeholder="请选择审批人">
                <el-option label="区域一" value="shanghai" />
              </el-select>
            </el-form-item>

            <el-form-item label="工艺规程编号" prop="craftsId">
              <el-select v-model="object.craftsId" filterable clearable placeholder="请选择工艺规程编号">
                <el-option v-for="item in craftsInfoList" :key="item.id" :label="item.craftsNumber" :value="item.id" />
              </el-select>
            </el-form-item>

            <el-form-item label="动火等级" prop="hotLevel">
              <el-input v-model="object.hotLevel" placeholder="请输入动火等级" :maxlength="100" show-word-limitclearable
                autofocus />
            </el-form-item>

            <el-form-item label="动火作业单位" prop="hotEntName">
              <el-input v-model="object.hotEntName" placeholder="请输入动火作业单位" :maxlength="100" show-word-limitclearable
                autofocus />
            </el-form-item>

            <el-form-item label="生产计划" prop="repairMethod">
              <el-input v-model="object.repairMethod" placeholder="请输入生产计划" :maxlength="100" show-word-limitclearable
                autofocus />
            </el-form-item>

            <el-form-item label="焊口总数量" prop="weldAllNumber">
              <el-input-number v-model="object.weldAllNumber" placeholder="请输入焊口总数量" :maxlength="100"
                show-word-limitclearable autofocus />
            </el-form-item>

            <el-form-item label="焊口完成数量" prop="weldFinshNumber">
              <el-input-number v-model="object.weldFinshNumber" placeholder="请输入焊口完成数量" :maxlength="100"
                show-word-limitclearable autofocus />
            </el-form-item>

            <el-form-item label="纵焊缝总数量" prop="portraitWeldAllNumber">
              <el-input-number v-model="object.portraitWeldAllNumber" placeholder="请输入焊口完成数量" :maxlength="100"
                show-word-limitclearable autofocus />
            </el-form-item>

            <el-form-item label="纵焊缝完成数量" prop="portraitWeldFinshNumber">
              <el-input-number v-model="object.portraitWeldFinshNumber" placeholder="请输入焊口完成数量" :maxlength="100"
                show-word-limitclearable autofocus />
            </el-form-item>

            <el-form-item label="环焊缝总数量" prop="cinctureWeldAllNumber">
              <el-input-number v-model="object.cinctureWeldAllNumber" placeholder="请输入焊口完成数量" :maxlength="100"
                show-word-limitclearable autofocus />
            </el-form-item>

            <el-form-item label="环焊缝完成数量" prop="cinctureWeldFinshNumber">
              <el-input-number v-model="object.cinctureWeldFinshNumber" placeholder="请输入焊口完成数量" :maxlength="100"
                show-word-limitclearable autofocus />
            </el-form-item>
            <el-form-item label="大屏名称" prop="screenName">
              <el-input v-model="object.screenName" placeholder="请输入大屏名称" :maxlength="100" show-word-limitclearable
                autofocus />
            </el-form-item>
            <el-form-item label="大屏Logo" prop="logo">
              <wise-file v-model="object.logo" upload-type="image" :limit="1" :max-file-size="100*1024*1024" />
            </el-form-item>
            <el-form-item label="施工方案" prop="construction">
              <wise-file v-model="object.construction" upload-type="file" :limit="1" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <el-dialog ref="drawer1" title="查看项目" :visible.sync="drawer1" destroy-on-close>
      <div v-if="drawer1" class="draw-body">
        <div class="wise-form">
          <el-form :validate-on-rule-change="false" label-width="130px" label-suffix=":">
            <el-form-item label="项目名称" prop="name">
              {{ object.name }}
            </el-form-item>
            <el-form-item label="项目编号" prop="welderNumber">
              {{ object.welderNumber }}
            </el-form-item>
            <el-form-item label="项目地址" prop="area">
              {{ object.provinceName }}{{ object.cityName }}{{ object.countryName }}{{ object.streetName }}
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              {{ object.address }}
            </el-form-item>
            <el-form-item label="项目开始时间" prop="startTime">
              {{ object.startTime | dateFormat('YYYY-MM-DD HH:mm:ss') }}
            </el-form-item>
            <el-form-item label="项目结束时间" prop="endTime">
              {{ object.endTime | dateFormat('YYYY-MM-DD HH:mm:ss') }}
            </el-form-item>
            <el-form-item label="动火等级" prop="hotLevel">
              {{ object.hotLevel }}
            </el-form-item>
            <!-- <el-form-item label="动火作业单位" prop="hotEntName">
              {{ object.hotEntName }}
            </el-form-item>
            <el-form-item label="生产计划" prop="repairMethod">
              {{ object.repairMethod }}
            </el-form-item>
            <el-form-item label="大屏名称" prop="screenName">
              {{ object.screenName }}
            </el-form-item>
            <el-form-item label="焊口总数量" prop="weldAllNumber">
              {{ object.weldAllNumber }}
            </el-form-item>
            <el-form-item label="焊口完成数量" prop="weldFinshNumber">
              {{ object.weldFinshNumber }}
            </el-form-item>
            <el-form-item label="纵焊缝总数量" prop="portraitWeldAllNumber">
              {{ object.portraitWeldAllNumber }}
            </el-form-item>
            <el-form-item label="纵焊缝完成数量" prop="portraitWeldFinshNumber">
              {{ object.portraitWeldFinshNumber }}
            </el-form-item>
            <el-form-item label="环焊缝总数量" prop="cinctureWeldAllNumber">
              {{ object.cinctureWeldAllNumber }}
            </el-form-item>
            <el-form-item label="环焊缝完成数量" prop="cinctureWeldFinshNumber">
              {{ object.cinctureWeldFinshNumber }}
            </el-form-item> -->
            <el-form-item label="大屏Logo" prop="logo">
              <template v-if="object.logo">
                <el-image :src="object.logo|imgPath" fit="contain" style="width: 200px">
                  <div slot="error" class="image-slot">
                    <img src="~@/assets/img/defaultimg.png">
                  </div>
                </el-image>
              </template>
            </el-form-item>
            <el-form-item v-if="object.construction && object.construction.length>0" label="施工方案" prop="file">
              <file-type :files="object.construction" />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <!-- 主题弹层 -->
    <el-dialog title="设置主题" :visible.sync="dialogVtheme" width="30%">
      <el-form ref="form" :model="themeObj" label-width="80px">
        <el-form-item label="设置主题">
          <el-select v-model="themeObj.code" clearable placeholder="请选择主题">
            <el-option label="绿松石蓝(默认)" value="default" />
            <el-option label="粉绿主题" value="theme2" />
            <el-option label="天蓝主题" value="theme3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="setThemeHandle">确定</el-button>
          <el-button @click="dialogVtheme = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 创建项目 -->
    <createProjectFormks ref="createProjectFormks" />
  </div>
</template>

<script>
  import WiseCrud from '@/components/Crud/wiseCrud'
  import {
    postHandle
  } from '@/api'
  import WiseFile from '@/components/Crud/components/wiseFile'
  import WiseRegion from '@/components/Crud/components/wiseRegion'
  import WiseDate from '@/components/Crud/components/wiseDate'
  import FileType from '@/components/Crud/components/fileType'
  import {
    setSpaceId
  } from '../../../../utils/auth'
  import CreateProjectFormks from './createProjectFormks.vue'
  export default {
    name: 'ProviderManage',
    components: {
      FileType,
      WiseCrud,
      WiseRegion,
      WiseDate,
      WiseFile,
      CreateProjectFormks
    },
    data() {
      return {
        dqsj:new Date().getTime(),
        form: {
          region: ''
        },
        subView: false,
        craftsId: null,
        dialogVtheme: false,
        urls: {
          list: '/api/v1/welder-sbtx-second/project-info-comb/list',
          add: '/api/v1/welder-sbtx-second/project-info-comb/create',
          show: '/api/v1/welder-sbtx-second/project-info-comb/show/',
          update: '/api/v1/welder-sbtx-second/project-info-comb/update/'
        },
        handle: ['filters'],
        fields: [{
            label: '序号',
            type: 'index',
            use: ['table']
          },
          {
            label: '作业单位',
            prop: 'name',
            type: 'text',
            maxlength: 20,
            use: ['table']
          },
          {
            label: '项目编号',
            prop: 'welderNumber',
            type: 'text',
            maxlength: 20,
            use: [ ]
          },
          {
            label: '项目地址',
            prop: 'area',
            type: 'area',
            objKeys: [{
                field: 'province',
                key: 'province',
                value: 'key'
              },
              {
                field: 'provinceName',
                key: 'province',
                value: 'value',
                tableShow: true
              },
              {
                field: 'city',
                key: 'city',
                value: 'key'
              },
              {
                field: 'cityName',
                key: 'city',
                value: 'value',
                tableShow: true
              },
              {
                field: 'county',
                key: 'area',
                value: 'key'
              },
              {
                field: 'countryName',
                key: 'area',
                value: 'value',
                tableShow: true
              },
              {
                field: 'street',
                key: 'town',
                value: 'key'
              },
              {
                field: 'streetName',
                key: 'town',
                value: 'value',
                tableShow: true
              }
            ],
            use: ['table']
          },
          {
            label: '详细地址',
            prop: 'address',
            type: 'text',
            maxlength: 200,
            use: ['table']
          },
          {
            label: '项目开始时间',
            prop: 'startTime',
            type: 'date',
            format: 'YYYY-MM-DD HH:mm:ss',
            use: ['table']
          },
          {
            label: '项目结束时间',
            prop: 'endTime',
            type: 'date',
            format: 'YYYY-MM-DD HH:mm:ss',
            use: ['table']
          },
          {
            label: '动火等级',
            prop: 'hotLevel',
            type: 'text',
            maxlength: 20,
            use: ['table']
          },
          {
            label: '操作',
            type: 'handle',
            use: ['table'],
            handle: [],
            tableWidth: 340
          }
        ],
        drawer: false,
        drawer1: false,
        drawer2: false,
        drawer3: false,
        removeLoding: null,
        title: '创建项目',
        typeList: [],
        craftsInfoList: [],
        userList: [],
        object: {
          name: null,
          screenName: null,
          logo: null,
          serialNum: null,
          province: null,
          city: null,
          county: null,
          street: null,
          provinceName: null,
          cityName: null,
          countryName: null,
          streetName: null,
          address: null,
          companyName: null,
          manager: null,
          typeCode: null,
          phone: null,
          file: [],
          remark: null,
          craftsId: null,
          welderNumber: null,
          userId: null,
          startTime: '',
          endTime: '',
          hotLevel: null,
          hotEntName: null,
          repairMethod: null,
          weldAllNumber: null,
          weldFinshNumber: null,
          portraitWeldAllNumber: null,
          portraitWeldFinshNumber: null,
          cinctureWeldAllNumber: null,
          cinctureWeldFinshNumber: null,
          construction: null
        },
        rules: {
          name: [{
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          }],
          welderNumber: [{
            required: true,
            message: '请输入项目编号',
            trigger: 'blur'
          }],
          area: [{
            required: true,
            message: '请选择地址',
            trigger: 'blur'
          }],
          address: [{
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }],
          startTime: [{
            required: true,
            message: '请选择项目开始时间',
            trigger: 'blur'
          }],
          endTime: [{
            required: true,
            message: '请选择项目结束时间',
            trigger: 'blur'
          }],
          hotLevel: [{
            required: true,
            message: '请输入动火等级',
            trigger: 'blur'
          }],
          hotEntName: [{
            required: true,
            message: '请输入动火作业单位',
            trigger: 'blur'
          }],
          repairMethod: [{
            required: true,
            message: '请输入生产计划',
            trigger: 'blur'
          }],
          screenName: [{
            required: true,
            message: '请输入大屏名称',
            trigger: 'blur'
          }]
        },
        fileList: [],
        themeObj: {
          id: null,
          code: 'default'
        }
      }
    },
    computed: {
      spaceId() {
        return this.$store.getters.entSpaceId
      },
      filters() {
        if (this.$store.state.user.project) {
          return [{
            field: 'id',
            operator: 'EQUALS',
            value: this.$store.state.user.project.id
          }]
        } else {
          return []
        }
      }
    },
    mounted() {
      //window.location.reload(true);
      this.$nextTick(() => {
        this.$refs['createProjectFormks'].$on('refreshTable', () => {
          this.$refs['wise-crud'].handleSearch(0)
        })
      })
    },
    methods: {
      handleAdd() {
        this.title = '创建项目'
        this.fileList = []
        this.object = {
          name: null,
          screenName: null,
          logo: null,
          serialNum: null,
          area: null,
          provinceCode: null,
          cityCode: null,
          countyCode: null,
          streetCode: null,
          provinceName: null,
          cityName: null,
          countyName: null,
          streetName: null,
          address: null,
          companyName: null,
          manager: null,
          typeCode: null,
          phone: null,
          file: [],
          remark: null,
          craftsId: null,
          welderNumber: null,
          userId: null,
          startTime: '',
          endTime: '',
          hotLevel: null,
          hotEntName: null,
          repairMethod: null,
          weldAllNumber: null,
          weldFinshNumber: null,
          portraitWeldAllNumber: null,
          portraitWeldFinshNumber: null,
          cinctureWeldAllNumber: null,
          cinctureWeldFinshNumber: null,
          construction: null
        }
        this.drawer = true
        this.getCraftsInfoList()
      },
      viewScreen() {
        this.$router.push({
          name: "screen"
        });
        // if (this.enterprise.bigScreenType == 1) {
        //   window.open(
        //     "/enterprise/screen?id=" +
        //       this.enterprise.spaceId +
        //       "&img=" +
        //       this.enterprise.bigScreenStr
        //   );
        // } else {
        //   window.open(this.enterprise.bigScreenStr);
        // }
      },
      editHandle(row) {
        this.$refs['createProjectFormks'].editHandle(row)
        this.$refs['createProjectFormks'].drawer = true
        // this.title = '编辑项目'
        // this.object = {
        //   name: null,
        //   screenName: null,
        //   logo: null,
        //   serialNum: null,
        //   area: null,
        //   provinceCode: null,
        //   cityCode: null,
        //   countyCode: null,
        //   streetCode: null,
        //   provinceName: null,
        //   cityName: null,
        //   countyName: null,
        //   streetName: null,
        //   address: null,
        //   companyName: null,
        //   manager: null,
        //   typeCode: null,
        //   phone: null,
        //   file: [],
        //   remark: null,
        //   craftsId: null,
        //   welderNumber: null,
        //   userId: null,
        //   startTime: '',
        //   endTime: '',
        //   hotLevel: null,
        //   hotEntName: null,
        //   repairMethod: null,
        //   weldAllNumber: null,
        //   weldFinshNumber: null,
        //   portraitWeldAllNumber: null,
        //   portraitWeldFinshNumber: null,
        //   cinctureWeldAllNumber: null,
        //   cinctureWeldFinshNumber: null,
        //   construction: null
        // }
        // this.fileList = []
        // this.getObjectById(row.id)
        // this.getCraftsInfoList()
        // this.drawer = true
      },
      viewHandle(row) {
        this.getObjectById(row.id)
        this.drawer1 = true
      },
      removeHandle(row) {
        this.$confirm('您确定要删除该项目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let removeLoding = this.$loading({
            lock: true,
            text: '删除中,请勿操作!或者刷新页面!',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          postHandle('/api/v1/welder-sbtx-second/project-info-comb/remove-project/' + row.id, {}).then(response => {
            this.$message('删除成功')
            this.dialogVtheme = false
            this.$refs['wise-crud'].handleSearch(1)
            removeLoding.close();
          }).catch(error => {
            this.loading = false
            const data = error.response.data
            for (const key in data) {
              this.$message.error(this.$t(data[key]))
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      getObjectById(id) {
        this.fileList = []
        postHandle(this.urls.show + id, {}).then(response => {
          this.object = response.result
          this.object.area = {
            province: {
              key: this.object.province,
              value: this.object.provinceName
            },
            city: {
              key: this.object.city,
              value: this.object.cityName
            },
            area: {
              key: this.object.county,
              value: this.object.countyName
            },
            town: {
              key: this.object.street,
              value: this.object.streetName
            }
          }
        })
      },
      removeById(id) {
        // this.removeLoding.close();
        // postHandle('/api/v1/welder-sbtx-second/project-info-comb/remove-project/' + id, {}).then(response => {
        //   this.$message('删除成功')
        //   this.dialogVtheme = false
        //   this.$refs['wise-crud'].handleSearch(1)
        //   this.removeLoding.close();
        // }).catch(error => {
        //   this.loading = false
        //   const data = error.response.data
        //   for (const key in data) {
        //     this.$message.error(this.$t(data[key]))
        //   }
        // })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url
            if (this.object.id) {
              url = this.urls.update + this.object.id
            } else {
              url = this.urls.add
            }
            postHandle(url, {
              obj: this.object
            }).then(response => {
              this.$message('操作成功')
              this.drawer = false
              if (this.object.id) {
                this.$refs['wise-crud'].handleSearch(0)
              } else {
                this.$refs['wise-crud'].handleSearch(1)
              }
              // this.$refs['wise-crud'].handleSearch()
              // this.$refs['drawer'].closeDrawer()
            }).catch(error => {
              const data = error.response.data
              for (const key in data) {
                this.$message.error(this.$t(key + '.' + data[key]))
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      setValue(objVal) {
        if (objVal && objVal.length > 0) {
          objVal.forEach(item => {
            this.$set(this.object, item.field, item.value)
          })
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      getCraftsInfoList() {
        const req = {
          d: {
            page: {
              p: 1,
              ps: 9999
            }
          }
        }
        postHandle('/api/v1/welder-sbtx-second/crafts-info-comb/list', req).then(response => {
          const data = response.result
          this.craftsInfoList = data
        })
      },
      /* getUserListList() {
        const req = {
          d: {
            page: {
              p: 1,
              ps: 9999
            }
          }
        }
        postHandle('/api/v1/welder-uac/user-information', req).then(response => {
          const data = response.result
          this.userList = data
        })
      },*/
      screenMonitor(row) {
        
       
          setSpaceId(row.spaceId)
          window.location.href = '/project'
       
     
        // this.$router.push({
        //   name: 'ProjectScreen',
        //   query: {
        //     id: row.id
        //   }
        // })
        // let routeUrl = this.$router.resolve({
        //   name: 'ProjectScreen',
        //   query: {
        //     id: row.id
        //   }
        // })
        // window.open(routeUrl.href, '_blank')
      },
      setTheme(row) {
        this.themeObj.id = row.id
        this.themeObj.code = row.code ? row.code : 'default'
        this.dialogVtheme = true
      },
      setThemeHandle() {
        postHandle(`/api/v1/welder-sbtx-second/project-info-comb/update-project-code/${this.themeObj.id}`, {
          d: {},
          obj: this.themeObj
        }).then(response => {
          this.$message('操作成功')
          this.dialogVtheme = false
          this.$refs['wise-crud'].handleSearch(1)
        }).catch(error => {
          const data = error.response.data
          for (const key in data) {
            this.$message.error(this.$t(key + '.' + data[key]))
          }
        })
      }
    }
  }
</script>

<style scoped>
  .select-add .el-form-item {
    margin-bottom: 18px;
  }
</style>